Basics

Was ist Typographie?

Typographie befasst sich mit der Gestaltung von Druckerzeugnissen. Ursprünglich konzentrierte sich diese Disziplin hauptsächlich auf den Buchdruck, wo die sorgfältige Auswahl und Anordnung von Schriften eine entscheidende Rolle spielte.

Im Laufe der Zeit hat sich der Anwendungsbereich der Typographie jedoch erheblich erweitert. Ab dem 19. und 20. Jahrhundert entwickelte sie sich zu einem vielseitigen Fachgebiet. Heute umfasst Typographie nicht nur den traditionellen Druck, sondern auch moderne Bereiche wie die Webgestaltung. In der digitalen Ära ist die typografische Gestaltung von Websites zu einem wesentlichen Aspekt geworden, der die Lesbarkeit und das ästhetische Erscheinungsbild von Online-Inhalten maßgeblich beeinflusst. Tagtäglich umgibt die Schrift und Typographie den Menschen und spielt somit eine wichtige Rolle in nahezu allen Bereichen der visuellen Kommunikation.

Typographie kann in zwei Kategorien eingeteilt werden, Mikrotypographie und Makrotypographie.
Mikrotypographie (Detailtypographie) bezeichnet die Feinheiten des Schriftsatzes. Hier wird zum Beispiel die Laufweite (Abstand zwischen einzelnen Buchstaben), Spationierung (horizontaler Abstand zwischen einzelnen Zeichen), Wortabstände, Ligaturen (Verbindung zweier oder mehrerer Buchstaben zu einem einzigen) und die Schriftart betrachtet.
Makrotypographie beschäftigt sich mit dem Layout der Druck- oder Webseite. Hier wird zum Beispiel das Seitenformat, der Satzspiegel (Nutzfläche des Textes), der Zeilenabstand, die Zeilenbreite sowie Schriftgröße betrachtet.

Typographie im Web

Webtypographie ist ein entscheidender Bestandteil des Webdesigns. Sie geht weit über die bloße Auswahl von Schriftarten hinaus und beeinflusst maßgeblich die Ästhetik und Benutzererfahrung einer Webseite. Ein zentrales Anliegen der Webtypographie ist die Optimierung der Lesbarkeit und Zugänglichkeit von Texten im digitalen Raum.

Die Bedeutung der Webtypographie wächst stetig, da das Internet zunehmend als primäre Informationsquelle genutzt wird. Eine durchdachte typografische Gestaltung trägt entscheidend dazu bei, Informationen klar erkennbar und leicht lesbar zu präsentieren. Dies ist besonders wichtig in Zeiten, in denen Nutzer mit einer Flut von Online-Inhalten konfrontiert sind und schnell relevante Informationen erfassen müssen.

Für Unternehmen spielt die Webtypographie eine zusätzliche strategische Rolle. Sie ist ein wesentlicher Bestandteil des digitalen Markenauftritts und trägt zur Stärkung der Unternehmensidentität bei. Durch die konsistente Verwendung bestimmter Schriftarten und typografischer Stile auf der Webseite, in E-Mails und anderen digitalen Materialien können Unternehmen ihre visuelle Identität festigen und sich von Wettbewerbern abheben.

Schriftfamilien und Arten

Schriftfamilien oder Schriftbilder bezeichnen ein vollständiges Alphabet, dessen Buchstaben und Symbole alle ähnlich gestaltet sind. Ein Beispiel für Schriftfamilien sind Times, Arial oder Minion. Die Schriftart bezieht sich auf den spezifischen Stil einer Schriftfamilie. Ein Beispiel wäre Inter Sans Serif, welche eine Schriftart der Schriftfamilie Inter ist.

Hauptsächlich kann man Schriftarten in 4 Kategorien einteilen:
Die Serifenschrift, welche durch Serifen (kleine Füßchen am Buchstabenende) und unterschiedliche Strichstärke der Buchstaben charakterisiert wird. Die Serifenlose Schrift, die durch das Fehlen der Serifen und die gleichbleibende Strichstärke der Buchstaben charakterisiert wird. Die Schreibschrift, welche durch den handschriftartigen Charakter und meist nicht genaue Ausrichtung der Schriftlinie charakterisiert wird. Außerdem gibt es noch viele andere wie zum Beispiel gebrochene Schriften (ein Beispiel wären altdeutsche Schriften wie Fraktur), Monospaced-Schriftarten (ein Beispiel wäre Courier) oder Schmuckschriften (dekorative Schriften wie Comic Sans, Impact).

Default Fonts

In den frühen Tagen des Webs, etwa um 1990, waren die Auswahlmöglichkeiten an Schriftarten für Webdesigner äußerst begrenzt. Diese Einschränkung hatte einen praktischen Grund: Webseiten konnten nur Schriftarten anzeigen, die bereits auf den Computern der Benutzer installiert waren. Dies führte zu einer sehr begrenzten Palette von sogenannten "websicheren" Schriften. Typische Beispiele für solche standardmäßig verfügbaren Schriftarten waren Arial, Helvetica und Times New Roman.

Heutzutage werden diese als Fall-Back-Schriften verwendet, wenn die gewählte Schrift nicht geladen werden kann. Nun können aber beliebige Schriftarten im Web verwendet werden.

/* fonts */
--font-family-primary: "Inter",  "Arial" , sans-serif;

/* Inter ist die Hauptschriftfamilie */
/* Arial ist hierbei die Fall-Back Schrift */

                        

Basics auf dieser Webseite

Auf dieser Webseite wurde bewusst Inter Sans Serif als primäre Schriftart eingesetzt. Diese serifenlose Schrift zeichnet sich durch ihre hervorragende Lesbarkeit auf Bildschirmen aus, besonders bei umfangreichen Texten in kleineren Schriftgrößen. Um eine durchgängige typografische Harmonie zu gewährleisten, wurde auf die Verwendung einer zweiten Schriftart verzichtet. Inter Sans Serif vermittelt zudem ein Gefühl von Modernität und Zeitgemäßheit, was sich hervorragend mit dem Thema "Typographie im Internet" vereint. Diese Wahl unterstreicht die zeitgemäße Natur des Inhalts und spiegelt gleichzeitig moderne Designprinzipien wider. Als Fallback-Schrift wurde Arial Sans Serif gewählt. Diese Entscheidung basiert auf der ähnlichen Formgebung beider Schriften, was im Falle der Nichtverfügbarkeit von Inter einen nahtlosen visuellen Übergang ermöglicht.

Im Kontrast dazu stehen die Beispieltexte auf der Landing Page. Hier wurden gezielt unterschiedliche Schriftarten eingesetzt, um zu veranschaulichen, wie verschiedene Typografien denselben Text unterschiedlich interpretieren und dadurch verschiedene emotionale Reaktionen hervorrufen können. Diese Gegenüberstellung dient als praktische Illustration der Macht der Typographie in der visuellen Kommunikation.

/* fonts */
--font-family-primary: "Inter",  "Arial" , sans-serif;
--font-family-body: var(--font-family-primary);
--font-family-heading: var(--font-family-primary);

--font-family-example-1: "LoveLive";
--font-family-example-2: "YourMurdererBB";
--font-family-example-3: "Orbitron";
--font-family-example-4: "Righteous";